<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>统计</title>
    <link rel="shortcut icon" href="favicon.ico">
    <link href="../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
    <link href="../static/css/font-awesome.min.css" th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/>
    <link href="../static/css/animate.min.css" th:href="@{/css/animate.min.css}" rel="stylesheet"/>
    <link href="../static/css/style.min.css" th:href="@{/css/style.min.css}" rel="stylesheet"/>
</head>

<body class="gray-bg">
<div class="wrapper wrapper-content">
    <div class="row">
        <div class="col-sm-3">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <span class="label label-success pull-right">总计</span>
                    <h5>接收数据</h5>
                </div>
                <div class="ibox-content">
                    <h1 class="no-margins"><span th:text="${totalRead}"/> KB </h1>
                    <div class="stat-percent font-bold text-success"><span th:text="${lastCumuTime}"/></i>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-3">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <span class="label label-info pull-right">总计</span>
                    <h5>发送数据</h5>
                </div>
                <div class="ibox-content">
                    <h1 class="no-margins"><span th:text="${totalWritten}"/> KB </h1>
                    <div class="stat-percent font-bold text-info"><span th:text="${lastCumuTime}"/></i>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-3">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <span class="label label-primary pull-right">当前</span>
                    <h5>接收数据</h5>
                </div>
                <div class="ibox-content">
                    <h1 class="no-margins"><span th:text="${currentRead}"/> KB </h1>
                    <div class="stat-percent font-bold text-navy"> </i>
                    </div>
                    <small></small>
                </div>
            </div>
        </div>
        <div class="col-sm-3">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <span class="label label-danger pull-right">当前</span>
                    <h5>发送数据</h5>
                </div>
                <div class="ibox-content">
                    <h1 class="no-margins"><span th:text="${currentWritten}"/> KB </h1>
                    <div class="stat-percent font-bold text-danger"> </i>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>节点</h5>
                    <div class="ibox-tools">
                        <a class="collapse-link">
                            <i class="fa fa-chevron-up"></i>
                        </a>
                        <a class="close-link">
                            <i class="fa fa-times"></i>
                        </a>
                    </div>
                </div>
                <div class="ibox-content">
                    <table id="node-table" class="table table-hover no-margins">
                        <thead>
                        <tr>
                            <th>节点编号</th>
                            <th>节点名称</th>
                            <th>节点地址</th>
                            <th>网络连通性</th>
                            <th>最大时延</th>
                            <th>平均时延</th>
                            <th>最小时延</th>
                            <th>ttl</th>
                            <th>丢包率</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr th:each="status : ${nodeStatus}">
                            <td><small th:text="${status.nodeId}"></small>
                            </td>
                            <td th:text="${status.nodeName}"></td>
                            <td th:text="${status.nodeAddr}"></td>
                            <td th:if="${status.connectivity}">
                                <span class="label label-primary">已连接</span>
                            </td>
                            <td th:if="${!status.connectivity}">
                                <span class="label label-danger">未连接</span>
                            </td>
                            <td class="inline-block"><i class="fa fa-clock-o"></i>
                                <i th:text="${status.maxDelay}"></i> ms
                            </td>
                            <td class="inline-block"><i class="fa fa-clock-o"></i>
                                <i th:text="${status.delay}"></i> ms
                            </td>
                            <td class="inline-block"><i class="fa fa-clock-o"></i>
                                <i th:text="${status.minDelay}"></i> ms
                            </td>
                            <td th:text="${status.ttl}"></td>
                            <td class="inline-block"><i class="fa fa-clock-o"></i>
                                <i th:text="${status.lossRate}"></i> %
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>节点通道</h5>
                    <div class="ibox-tools">
                        <a class="collapse-link">
                            <i class="fa fa-chevron-up"></i>
                        </a>
                        <a class="close-link">
                            <i class="fa fa-times"></i>
                        </a>
                    </div>
                </div>
                <div class="ibox-content">
                    <table id="node-table" class="table table-hover no-margins">
                        <thead>
                        <tr>
                            <th>节点编号</th>
                            <th>TCP通道ID</th>
                            <th>TCP发送限速</th>
                            <th>TCP接收限速</th>
                            <th>TCP检查间隔</th>
                            <th>KCP通道ID</th>
                            <th>KCP发送限速</th>
                            <th>KCP接收限速</th>
                            <th>KCP检查间隔</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr th:each="keyStr:${nodeChannel.keySet()}">
                            <td th:text="${keyStr}"></td>
                            <td th:text="${nodeChannel.get(keyStr).tcpChannelId}"></td>
                            <td th:text="${nodeChannel.get(keyStr).tcpWriteLimit}"></td>
                            <td th:text="${nodeChannel.get(keyStr).tcpReadLimit}"></td>
                            <td th:text="${nodeChannel.get(keyStr).tcpCheckInterval}"></td>
                            <td th:text="${nodeChannel.get(keyStr).kcpChannelId}"></td>
                            <td th:text="${nodeChannel.get(keyStr).kcpWriteLimit}"></td>
                            <td th:text="${nodeChannel.get(keyStr).kcpReadLimit}"></td>
                            <td th:text="${nodeChannel.get(keyStr).kcpCheckInterval}"></td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>传输队列</h5>
                    <div class="ibox-tools">
                        <a class="collapse-link">
                            <i class="fa fa-chevron-up"></i>
                        </a>
                        <a class="close-link">
                            <i class="fa fa-times"></i>
                        </a>
                    </div>
                </div>
                <div class="ibox-content">
                    <table id="node-table" class="table table-hover no-margins">
                        <thead>
                        <tr>
                            <th>任务编号</th>
                            <th>任务类型</th>
                            <th>当前状态</th>
                            <th>已发送长度</th>
<!--                            <th>已确认长度</th>-->
                            <th>总长度</th>
                            <th>开始时间</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr th:each="taskInfo : ${taskInfos}">
                            <td th:text="${taskInfo.taskId}"></td>
                            <td th:text="${taskInfo.taskType}"></td>
                            <td th:text="${taskInfo.taskStatus}"></td>
                            <td th:text="${taskInfo.offset}"></td>
<!--                            <td th:text="${taskInfo.recvOffset}"></td>-->
                            <td th:text="${taskInfo.totalSize}"></td>
                            <td th:text="${taskInfo.startTime}"></td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/js/bootstrap.min.js}"></script>
<script th:src="@{/ajax/libs/flot/jquery.flot.js}"></script>

<th:block th:include="include :: sparkline-js"/>
<script type="text/javascript">
    $(document).ready(function () {

    });
</script>
</body>
</html>
